<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="edu.zjut.sjq.bean.User" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  User user= (User) session.getAttribute("user");

%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>作品上传</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />

  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/datepicker/datepicker.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/slider/slider.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/chosen/chosen.css" type="text/css" />

  <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
  <style>
    .myButton{
      margin-top: 50px;
      width: 60%;
      margin-left: 20%;
      height: 40px;
      font-size: 21px;

    }
  </style>
</head>
<body class="">

  <section class="vbox">
            <section class="scrollable wrapper">

                <div class="col-lg-offset-1 col-lg-10">
                  <section class="panel panel-default">
                    <header class="panel-heading font-bold">作品上传</header>
                      <div class="panel-body">


                        <form class="form-horizontal " enctype="multipart/form-data" id="uploadForm" method="post"  action="<%=(basePath)%>upload/img">


                          <div class="form-group">
                            <label class="col-lg-2 control-label">作品名称</label>
                            <div class="col-lg-10">
                              <input type="name" name="title" id="title" class="form-control" placeholder="Video Name">
                            </div>
                          </div>
                          <div class="line line-dashed b-b line-lg pull-in"></div>


                          <div class="form-group">
                            <label class="col-lg-2 control-label">选择图片</label>

                            <div class="col-lg-10">

                            <div class="row">
                              <div class="col-md-6">
                                <input type="file" name="file" id="coverChoose" class="filestyle" data-icon="false" data-classButton="btn btn-default" data-classInput="form-control inline v-middle input-s">
                                <span class="help-block m-b-none">(注：请选择一张图片作为视频封面，比例为16:9)</span>
                              </div>
                              <div class="col-md-6">
                                <section class="panel" style="width: 270px;height: 165px;;">
                                  <div class="panel-body">
                                    <div style="width: 240px;height: 135px">
                                      <img src="${pageContext.request.contextPath}/images/p0.jpg" id="coverShow" class="img" alt="..." style="width: 100%;height: 100%">
                                    </div>
                                  </div>
                                </section>
                              </div>

                            </div>

                            </div>
                           </div>

                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <label class="col-lg-2 control-label">类型选择</label>
                            <div class="col-lg-6">
                              <select name="type" id="type" class="form-control m-b">
                                <option value="1">DV作品</option>
                                <option value="2">动画作品</option>
                                <option value="3">平面作品</option>
                                <option value="4">网页作品</option>
                                <option value="5">移动作品</option>
                                <option value="6">微课作品</option>
                                <option value="7">课件作品</option>
                              </select>
                            </div>
                          </div>

                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <label class="col-lg-2 control-label">时间选择</label>
                            <div class="col-lg-6">
                              <select name="year" id="year" class="form-control m-b">
                                <option value="2017">2017 | 第十六届</option>
                                <option value="2016">2016 | 第十五届</option>
                                <option value="2015">2015 | 第十四届</option>
                                <option value="2014">2014 | 第十三届</option>
                                <option value="2013">2013 | 第十二届</option>
                                <option value="2012">2012 | 第十一届</option>
                                <option value="2011">2011 | 第十届</option>
                              </select>
                            </div>
                          </div>


                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <label class="col-lg-2 control-label">选择视频</label>
                            <div class="col-lg-10">
                            <input type="file" name="file"  id="video" class="filestyle" data-icon="false" data-classButton="btn btn-default" data-classInput="form-control inline v-middle input-s">
                              <span class="help-block m-b-none">(注：支持视频格式 webmv、ogv、m4v、oga、mp4)</span>

                            </div>
                          </div>

                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <label class="col-lg-2 control-label">输入作品时长</label>
                            <div class="col-lg-10">
                              <input type="name" name="time" id="time" class="form-control" placeholder="Video Time">
                              <span class="help-block m-b-none">(注：10分30秒，表示为10：30)</span>
                            </div>
                          </div>

                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <label class="col-lg-2 control-label">作品简介</label>
                            <div class="col-lg-10">
                              <div id="epiceditor" name="dec">请在此输入...</div>
                              <span class="help-block m-b-none">(注：简单介绍一下作品，包括创作者姓名等)</span>
                            </div>
                            <input value="" id="description" name="description" type="hidden"/>
                          </div>

                          <div class="line line-dashed b-b line-lg pull-in"></div>
                          <div class="form-group">
                            <div class="col-xs-6">
                              <button type="button" class="btn btn-danger myButton" id="cancel">取&nbsp;消</button>
                            </div>

                            <div class="col-xs-6">
                              <button type="button" class="btn btn-success myButton" id="upload">上&nbsp;传</button>
                            </div>

                          </div>
                        </form>
                      </div>
                    </section>
                </div>


            </section>
          </section>


  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>

  <!-- datepicker -->
  <script src="${pageContext.request.contextPath}/js/datepicker/bootstrap-datepicker.js"></script>
  <!-- slider -->
  <script src="${pageContext.request.contextPath}/js/slider/bootstrap-slider.js"></script>
  <!-- file input -->  
  <script src="${pageContext.request.contextPath}/js/file-input/bootstrap-filestyle.min.js"></script>
  <!-- wysiwyg -->
  <script src="${pageContext.request.contextPath}/js/wysiwyg/jquery.hotkeys.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/bootstrap-wysiwyg.js"></script>
  <script src="${pageContext.request.contextPath}/js/wysiwyg/demo.js"></script>
  <!-- markdown -->
  <script src="${pageContext.request.contextPath}/js/markdown/epiceditor.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/markdown/demo.js"></script>

  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
  <script src="${pageContext.request.contextPath}/layer/layer.js"></script>

  <script>
      /*预览*/
    $("#coverChoose").change(function (event) {

      var files = event.target.files, file;
      if (files && files.length > 0) {
        // 获取目前上传的文件
        file = files[0];// 文件大小校验的动作
       /* if(file.size > 1024 * 1024 * 2) {
          alert('图片大小不能超过 2MB!');
          return false;
        }*/
        // 获取 window 的 URL 工具
        var URL = window.URL || window.webkitURL;
        // 通过 file 生成目标 url
        var imgURL = URL.createObjectURL(file);
        $("#coverShow").attr("src",imgURL);

      }
    });


    $("#upload").click(function () {
      var title=$("#title").val();
      if (title==""){
        layer.msg('请填写作品名称！', {time: 3000, icon:5});
        return false;
      }
      var coverChoose=$("#coverChoose").val();
      if (coverChoose==""){
        layer.msg('请选择作品封面照片！', {time: 3000, icon:5});
        return false;
      }
      var type=$("#type").val();
      if (type==""){
        layer.msg('请选择作品类型！', {time: 3000, icon:5});
        return false;
      }
      var year=$("#year").val();
      if (year==""){
        layer.msg('请作品参与年份！', {time: 3000, icon:5});
        return false;
      }

      var video=$("#video").val();
      if (video==""){
        layer.msg('请选择作品视频！', {time: 3000, icon:5});
        return false;
      }
      var time=$("#time").val();
      if (time==""){
        layer.msg('请输入视屏时长！', {time: 3000, icon:5});
        return false;
      }
      var dec= editor.getElement('editor').body.innerHTML;
      if (dec==""){
        layer.msg('请输入作品简介！', {time: 3000, icon:5});
        return false;
      }
      $("#description").val(dec);
      upload();
    });

    /*上传*/
    function upload() {
        var index = layer.load(2, {shade: false});
        var formData = new FormData($( "#uploadForm" )[0]);
        $.ajax({
          //contentType:"multipart/form-data",
          type: "POST",
          url:getRootPath()+"/uploadArticle",
          data:formData,//
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data) {
            layer.close(index);
            if (data.res==0){
              layer.msg(data.msg, {time: 3000, icon:2});
            }else {
              layer.msg(data.msg, {time: 3000, icon:6});
              setTimeout(function () {
                window.parent.location.reload();
              },1000);
            }
          },
          error: function(error) {
            layer.close(index);
            console.log(error)
          },
        });
      }

      $("#cancel").click(function () {
        window.parent.location.reload();
      });
    function getRootPath() {
      var curWwwPath = window.document.location.href;
      var pathName = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathName);
      var localhostPaht = curWwwPath.substring(0, pos);
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
      return (localhostPaht + projectName);
    }
  </script>
</body>
</html>